<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" class="check" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
      <li>
        <input type="checkbox" class="check" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>

    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" />
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script>
    // 假数据；
    let data = [
      {
        id: 1,
        title: "残酷月光 - 费启鸣",
        checked: false,
        collect: true
      }, {
        id: 2,
        title: "兄弟 - 艾热",
        checked: false,
        collect: false
      }, {
        id: 3,
        title: "毕生 - 夏增祥",
        checked: true,
        collect: true
      }, {
        id: 4,
        title: "公子向北去 - 李春花",
        checked: false,
        collect: false
      }, {
        id: 5,
        title: "战场 - 沙漠五子",
        checked: true,
        collect: false //是否收藏 true 收藏 false 没有收藏
      }
    ];
    // 数据优先；
    // 渲染视图；
    function renderData(data) {
      document.querySelector("#list").innerHTML = "";
      data.forEach(item => {
        let liEle = document.createElement("li");
        liEle.innerHTML = `<input type="checkbox" class="check" ${item.checked?'checked':''} />
        <span>${item.title}</span>
        ${item.collect?'<a href="javascript:;" class="cancelCollect">取消收藏</a>':'<a href="javascript:;" class="collect">收藏</a>'}
        <a href="javascript:;" class="remove">删除</a>`;
        document.querySelector("#list").appendChild(liEle)
      })
      addEvent();

      // 判断是否全选；->判断数据
      let isCheckAll = data.every(item=>item.checked);
      // console.log(isCheckAll)
      if(isCheckAll){
          document.querySelector("#checkAll").checked = true;
      }else{
        document.querySelector("#checkAll").checked = false;
      }
    }
    renderData(data);


    function addEvent(){
    // 绑定事件
    let liEles = document.querySelectorAll("#list li");
    // console.log(liEles);
    [...liEles].forEach((item,key)=>{
      // console.log(item);
      // let removeEle = item.querySelector(".remove");
      // removeEle.onclick = function(){
      //   console.log("点击了删除")
      // }
        item.onclick = function(e){
          console.log(e.target.className);
          switch(e.target.className){
            case 'check':
              // console.log("input",e.target.checked)
              data[key].checked = e.target.checked;
              break;
            case 'cancelCollect':
            // console.log("取消收藏")
              data[key].collect = false;
              break;
            case 'remove':
              console.log("删除");
              data.splice(key,1);
              break;
            case 'collect':
            console.log("收藏")
              data[key].collect = true;
              break;
          }
          // console.log(data);
          // 渲染视图；
          renderData(data);
        }
    })

    }


// 点击全选；
document.querySelector("#checkAll").onclick = function(){
  data.forEach(item=>{
    item.checked = this.checked;
  })
  renderData(data);
}

document.querySelector("#remove").onclick = function(){
  data =  data.filter(item=>!item.checked);
  renderData(data);
}

// 作业：实现添加功能；（持久化保存不错要求）;
document.querySelector("#add").onclick = function(){
  let title = document.querySelector("#newInfo").value;
  // console.log(title);
  let id = data[data.length-1].id + 1;
  let obj = {
        id,  //唯一标识符；
        title,
        checked: false,
        collect: false //是否收藏 true 收藏 false 没有收藏
      }
   data.push(obj);
   renderData(data);
}



  </script>
</body>

</html>